import React, { useCallback, useEffect, useRef, useState } from "react";
import MonacoEditor from 'react-monaco-editor';
import Style from './index.module.less'
import './language_kuangming'
const TextEditorV2 = ()=>{
    const containerRef = useRef(null);
    const editorRef = useRef(null);
    const oldDecorationsRef = useRef([]);
    const [code,setCode] = useState();
    const handleEditorChange = useCallback((newValue, e)=>{
        // console.log('编辑代码',newValue)
        // setCode(newValue)
    })
    useEffect(()=>{
        return;
        // 初始化编辑器，渲染DOM
        // editorRef.current = monaco.editor.create(document.querySelector('#my-dasdsad'), {
        //     value:'',//编辑器初始显示文字 也是编辑器的绑定值
        //     language:'less',//支持的语言
        //     automaticLayout: true,//是否开启自动布局
        //     theme:'vs-dark' //官方自带三种主题vs 白色, hc-black 黑色, or vs-dark 非常黑
        // });
    },[])
    //处理标题 装饰器
    const editorDidMount = useCallback((editor, monaco)=>{
        editorRef.current = editor;
        // 监听内容变化  
        editor.getModel()?.onDidChangeContent(() => {
            updateDecorations(editor, monaco);
        });
  
        // 初始化时应用装饰器
        updateDecorations(editor, monaco);
    },[])
    const updateDecorations = useCallback((editor, monaco)=>{
        const model = editor.getModel();  
        if (!model){
            return;
        }
        // 清除之前的装饰器  
        // const previousDecorations = editor.deltaDecorations(oldDecorationsRef.current,[]);
  
        // 查找所有以两位数字开头的文本部分  
        const matches = model.getValueInRange(model.getFullModelRange()).match(/([0-9]{2}\..*)/g);  
  
        // 创建新的装饰器数组  
        const newDecorations = matches ? matches.map((match, index) => {
            console.log(111,model.findMatches(match))
            const range = model.findMatches(match)[0].range; // 假设只有一个匹配项 
            console.log(888,range,monaco.editor.OverviewRulerLane);
            return {  
                range: range,
                options: {  
                    isWholeLine: false,
                    overviewRuler: {
                        position: monaco.editor.OverviewRulerLane.Right  
                    },  
                    inlineClassName: 'kangming-title' // 应用自定义CSS类  
                }  
            };  
        }) : [];
        // 应用新的装饰器  
        oldDecorationsRef.current = editor.deltaDecorations(oldDecorationsRef.current, newDecorations);
    },[]);
    return (
        <div className={Style.container}>
            <MonacoEditor  
                width="800"  
                height="600"  
                language="kuangming" // 或者你需要的语言，如 "shun"（如果已注册）  
                theme="kuangmingThemeOne"
                // value={code}
                options={{
                    selectOnLineNumbers: false,
                    wordWrap:'on',//自动换行
                    lineNumbers: 'on',//控制行号的显隐
                    contextmenu: false,
                    automaticLayout:true,
                    fixedOverflowWidgets: true, // 关闭右侧边栏
                }} // 其他Monaco Editor的配置选项  
                onChange={handleEditorChange}
                editorDidMount={editorDidMount}
                editorWillUnmount={()=>{}}
            />
        </div>
    )
}
export default TextEditorV2